<template>
	<view>
		<view class="page-body">
		    <view class="page-section page-section-gap">
		        <map style="width: 100%; height: 100vh;" :controls="controls" :circles="circles" :polyline='polyline' :scale="scale" :latitude="maplatitude" :longitude="maplongitude" :markers="covers">
		        </map>
		    </view>
		</view>
		
	</view>
</template>
 
<script>
	import { mapState, mapMutations,mapActions } from 'vuex';
	export default {
		computed: {
			...mapState('m_map', ['maplongitude','maplatitude']),
		},
		data() {
			return {
				title: 'map',
				latitude: 28.24595,
				longitude: 113.08093,
				covers: [{
					id:2,
					height:40,
					width:40,
				    latitude: 28.24595,//纬度
				    longitude: 113.08093,//经度
				    iconPath: 'https://img1.baidu.com/it/u=838939363,1415982011&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',	//显示的图标			
					title:'阿打算',//标注点名
					label:{//为标记点旁边增加标签
										content:'文本11',//文本
				            color:'#F76350',//文本颜色
					    anchorX:0,//label的坐标，原点是 marker 对应的经纬度
					    anchorY:0,//label的坐标，原点是 marker 对应的经纬度 
					    x:0,//这个组件微信在1.2.0以后就废弃了
					    y:0,
							bgColor:'#fff',//背景色
				      padding:5,//文本边缘留白
					    borderWidth:1,//边框宽度
					    borderColor:'#D84C29',//边框颜色							
					textAlign:'center',//文本对齐方式。
							 borderRadius: 10,  
						 },
					 callout:{//自定义标记点上方的气泡窗口 点击有效
				            content:'地点1',
				            color:'#F76350',
				            fontSize:12,
							borderRadius:90,
				     },
					 // anchor:{//经纬度在标注图标的锚点，默认底边中点
						//  x:5,
						//  y:1,
					 //  }
				},{
					id:3,
					height:40,
					width:40,
				    latitude: 28.24995,//纬度
				    longitude: 113.08993,//经度
				    iconPath: 'https://img1.baidu.com/it/u=838939363,1415982011&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',	//显示的图标			
					title:'阿打算',//标注点名
					label:{//为标记点旁边增加标签
										content:'文本11',//文本
				            color:'#F76350',//文本颜色
					    anchorX:0,//label的坐标，原点是 marker 对应的经纬度
					    anchorY:0,//label的坐标，原点是 marker 对应的经纬度 
					    x:0,//这个组件微信在1.2.0以后就废弃了
					    y:0,
							bgColor:'#fff',//背景色
				      padding:5,//文本边缘留白
					    borderWidth:1,//边框宽度
					    borderColor:'#D84C29',//边框颜色							
					textAlign:'center',//文本对齐方式。
							 borderRadius: 10,  
						 },
					 callout:{//自定义标记点上方的气泡窗口 点击有效
				            content:'地点1',
				            color:'#F76350',
				            fontSize:12,
							borderRadius:90,
				     },
					 // anchor:{//经纬度在标注图标的锚点，默认底边中点
						//  x:5,
						//  y:1,
					 //  }
				}],
				controls:[{//在地图上显示控件，控件不随着地图移动
					id:1,//控件id
					iconPath:'https://img1.baidu.com/it/u=838939363,1415982011&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',//显示的图标	
					position:{//控件在地图的位置
						left:15,
						top:15,
						width:50,
						height:50
					},	
				}],
				scale:15,//地图层级
				circles:[{//在地图上显示圆
					latitude: 28.24995,
					longitude: 113.08193,
					fillColor:"#FFC41F",//填充颜色
					color:"#12A1DD",//描边的颜色
					radius:50,//半径
					strokeWidth:2//描边的宽度
				}],
				polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
					points:[
						{latitude: 28.24995,longitude: 113.08193},
						{latitude: 28.24595,longitude: 113.08093},
					],
					color:"#0000AA",//线的颜色
					width:2,//线的宽度
					dottedLine:true,//是否虚线
					arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
				}],
			};
		},
		onLoad(){
			let test = this
			uni.getLocation({//获取当前的位置坐标
				type: 'wgs84',
				success: function (res) {
					console.log(res);
					test.mapaction(res)
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
		test.longitude = res.longitude
		test.latitude = res.latitude
			let covers = 		test.covers.find(item =>   item.id == 2 )
			
			// if(covers !== undefined ){
			// 	test.longitude = covers.longitude + 0.001
			// 	test.latitude = covers.latitude + 0.001
			// }
			console.log(covers);
				}
			});
				
// 			uni.chooseLocation({
// 				success: function (res) {
// 					console.log('位置名称：' + res.name);
// 					console.log('详细地址：' + res.address);
// 					console.log('纬度：' + res.latitude);
// 					console.log('经度：' + res.longitude);
// 				}
// 			});
		},
			methods: {
					...mapActions('m_map', ['mapaction']),
			...mapMutations('m_map', ['mutastateMap']),
		}
	}
</script>
 
<style>
 
</style>